<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>转换换换换换换换换换换换换换换换换换换换换换换换换换换换换换换换换换换换换换换换换换换换换！！！</title>
</head>

<body>
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            canvas {
                border: 1px solid;
            }
        </style>
    </head>

    <body>
        <canvas id="canvas"></canvas>
        <img src="" alt="">
        <script src="./js/jq.min.js"></script>
        <script>
            var canvas = document.getElementById("canvas");
            let ctx = canvas.getContext("2d");
            console.log(ctx);
            //新建图片对象
            var imgs = new Image();
            imgs.src = "./images/backimg3.png";
            // var imgs1 = new Image();
            // imgs1.src = "./images/posterimg.jpg";
            // 将图片渲染进canvas  (图片加载需要时间)    渲染多个图片 后渲染得回覆盖先渲染得
            imgs.onload = function () {
                console.log(imgs.width, imgs.height);
                $("#canvas").attr({
                    width: imgs.width,
                    height: imgs.height,
                });
                ctx.drawImage(imgs, 0, 0, imgs.width, imgs
                    .height
                    ); //CanvasDrawImage.drawImage(image: CanvasImageSource, dx: number, dy: number, dw: number, dh: number)
                // ctx.strokeStyle = "green"
                // ctx.strokeText("jpg后渲染得", 100, 100);
                var base64Img = canvas.toDataURL('image/png');
                console.log(base64Img);
            }
            // imgs1.onload = function () {
            //     // ctx.drawImage(imgs1,20,20);  //CanvasDrawImage.drawImage(image: CanvasImageSource, dx: number, dy: number): void
            //     ctx.drawImage(imgs1, 160, 200, 220, 220, 20, 220, 220,
            //         220
            //         ); // CanvasDrawImage.drawImage(image: CanvasImageSource,裁剪sx: number, sy: number, sw: number, sh: number, dx:number, dy: number, dw: number, dh: number): void  从x166Y166点开始裁剪,裁剪长宽220,放在220得位置上,图片缩放为100px
            //     ctx.strokeStyle = "red"
            //     ctx.strokeText("gif后渲染得", 100, 100);
            // }
        </script>
    </body>

    </html>
</body>

</html>